<?php
session_start();
include_once 'recursos/config.php';
$conf = new configuracion();
$dominio = $conf->getG2uDominio()."/";
$mensaje = "Ingrese a sus amigos o sus correos.";
$temp = "[" ;
if (is_array($_SESSION["g2uFriendList"])){
    foreach ($_SESSION["g2uFriendList"] as $key => $value) {
        $temp .= '{ ';
        $temp .= ' "id" : "'.$_SESSION["g2uFriendList"][$key]["id"].'", ';
        $temp .= ' "usuario" : "'.$_SESSION["g2uFriendList"][$key]["usuario"].'", ';
        $temp .= ' "upic" : "'.$_SESSION["g2uFriendList"][$key]["upic"].'" ';
        $temp .= '}, ' ;
    }
}

$temp .= "]" ;
//$json = json_encode($temp);
$json = ($temp);

$arrDate = getdate();
$fechahoy = str_pad($arrDate["mday"], 2,'0',STR_PAD_LEFT)."-".str_pad($arrDate["mon"], 2,'0',STR_PAD_LEFT)."-".$arrDate["year"]

?>
<img class="close" src="<?=$dominio?>images/gallery/close.gif" onclick="closeEventDialog();" />

<div class="contenido">
    <table>
        <tr>
            <td colspan="2" >
                <center><b>Crear Evento</b></center>
                <br/>
                <input type="hidden" id="g2uUsers" name="g2uUsers" value="<?=$_SESSION["g2uId"]?>" />
                <input type="hidden" id="g2uNoUsers" name="g2uNoUsers" value="0" />
            </td>
        </tr>
        <tr>
            <td width="50%">
                Motivo:
                <br/>
                <input type="text" id="motivo" name="motivo" size="25" />
            </td>
            <td rowspan="3">
                <img src="<?=$dominio?>images/png/invitar_amigos.png" onclick="$('#searchFriends').toggle(); $('#filtro').val('');" style="cursor: pointer;" />
                <div style="display: none;" id="searchFriends"> 
                    <input type="text" size="40" id="filtro" name="filtro" alt="<?=$mensaje?>" title="<?=$mensaje?>" />
                </div>
                <br/>
                <div style="height: 200px; border-style: solid; border-width: 0.1em; padding-left: 5px; padding-top: 5px; overflow: auto;" id="participantes">
                    <b>Participantes:</b> <br/>
                    <a> <img width='25px' src ="<?=$dominio.$_SESSION["g2uProfilePic"]?>" /> <?=$_SESSION["g2uName"]?> </a>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                Fecha:
                <br/>
                <input type="text" id="fecha" name="fecha" size="25" value="<?=$fechahoy?>" />
            </td>
        </tr>
        <tr>
            <td>
                Comentario:
                <br/>
                <textarea id="comentario" name="cometario" cols="20" rows="9" ></textarea>
            </td>
        </tr>
        <tr >
            <td colspan="2">
                <img src="<?=$dominio?>images/png/crear_evento.png" style="cursor: pointer" id="crear_evento" />
            </td>
        </tr>
    </table>
</div>

<script>
    $('#event_new img.close').click(function (event) {
        closeEventDialog();
    });    
    
    $( "#fecha" ).datepicker({ dateFormat: "dd-mm-yy" });
    
    $(document).ready(function(){
        
       $("#motivo").focus();
        
       $("#crear_evento").click(function(){
            motivo = $("#motivo").val();
            fecha = $("#fecha").val();
            comentario = $("#comentario").val();
            usuarios = $("#g2uUsers").val();
            noUsuarios = $("#g2uNoUsers").val();
            
            $.post('saveEvent', {
                motivo: motivo, 
                fecha: fecha,
                comentario: comentario,
                usuarios: usuarios,
                noUsuarios: noUsuarios},
                function(data){
                    $.post('listEvent', function(data2){
                        closeEventDialog();
                        $("#event_list").slideUp(500, function(){
                            $("#event_list").html(data2);
                            $("#event_list").slideDown();
                        });
                        
                    });
                }
            );
       });
    });
</script>

<script>
    var friends = <?=$json?>; 
    var dominio = "<?=$dominio?>";
    //friends = $.parseJSON(friends);
    
    /*for(var friend in friends){
        $("#participantes").append(friends[friend].upic+"  :: ");
    }*/
    
    function agregarUsuario(){
        $("#participantes").append(friends[friend].upic+"  :: ");
    }
    
    function x( request, response ) {
    var matches = $.map( availableTags, function(tag) {
      if ( tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
        return tag;
      }
    });
    response(matches);
  }
  //source: friends,
        $("#filtro").autocomplete({
            minLength: 0,
            
            source: function(request, response) {
                var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
                response($.grep(friends, function(item){return matcher.test(item.usuario); }) );
            },
            search: function( event, ui ) {},
            position: { at : "#filtro" } ,
            select: function(event, ui) {
                $("#filtro").val(ui.item.usuario);
                $("#participantes").append("<br/><img width='25px' src ='"+ dominio + ui.item.upic + "' /> <img src ='"+ dominio +"images/png/minus.png' /> "+ui.item.usuario);
                $("#g2uUsers").val($("#g2uUsers").val()+","+ui.item.id);
                $("#filtro").val("");
                return false;
            }
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li></li>").data("item.autocomplete", item).append("<a> <img width='25px' src ='"+ dominio + item.upic + "' /> "+item.usuario+" </a>").appendTo(ul);
        };
        
        $( "#filtro" ).keypress(function( event ) {
            if ( event.which == 13 ) {
                $("#participantes").append("<br/><img width='25px' src ='"+ dominio+ "/images/png/imagencontacto.png' /> <img src ='"+ dominio +"images/png/minus.png' /> "+$("#filtro").val());
                $("#g2uNoUsers").val($("#g2uNoUsers").val()+","+$("#filtro").val());
                $("#filtro").val("");
            }
        });
    
        $('#filtro').tipsy({html: true });
        
</script>